<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/京东轮播图.css">
</head>

<body>
    <div class="slide">
        <div class="image"></div>
        <div class="toClick toLeft">
            <svg id="widget-arrow" viewBox="0 0 1024 1024">
                <path fill="none" stroke-linejoin="round" stroke-linecap="round" stroke-width="145.067"
                    stroke="currentColor" d="m341.333 170.667 341.334 341.332-341.334 341.335"></path>
            </svg>
        </div>
        <div class="toClick toRight">
            <svg id="widget-arrow" viewBox="0 0 1024 1024">
                <path fill="none" stroke-linejoin="round" stroke-linecap="round" stroke-width="145.067"
                    stroke="currentColor" d="m341.333 170.667 341.334 341.332-341.334 341.335"></path>
            </svg>
        </div>
        <ul class="node">
            
        </ul>
    </div>
    <div class="console">
        控制台
        <select class="select" value="8">
            <option value="4">4</option>
            <option value="8" selected>8</option>
            <option value="12">12</option>
        </select>
    </div>
    <div class="msg"></div>
    <script src="./js/imgsUrl.js"></script>
    <script>
        window.onload = function () {
            var how = 8;//轮播多少张图片,现有15张图片
            var msg = document.querySelector(".msg"),
                slide = document.querySelector(".slide"),
                img = document.getElementsByClassName("image")[0],
                nodeItems = document.getElementsByClassName("node-item"),
                toClick = document.getElementsByClassName("toClick"),
                node = document.querySelector(".node"),
                select = document.querySelector(".select"),
                intercept = false;
            var slideStyle = getComputedStyle(slide, null);
            select.addEventListener('change', initCreate, false);
            for (var j = 0; j < toClick.length; j++) {
                toClick[j].dataset.data = j;
                toClick[j].onclick = function () {
                    if (intercept) return;
                    intercept = true;
                    setTimeout(function () {
                        intercept = false;
                    }, 500);
                    var cat = parseInt(document.getElementsByClassName("active")[0].dataset.data);
                    nodeItems[cat].classList.remove("active");
                    cat = (parseInt(this.dataset.data) == 0 ? (--cat < 0 ? nodeItems.length - 1 : cat) : (++cat >= nodeItems.length ? 0 : cat));
                    nodeItems[cat].classList.add("active");
                    img.style.left = (-parseInt(slideStyle.width)) * cat + "px";
                }
            }
            var cat = setInterval(function () {
                toClick[1].onclick();
            }, 3000);
            var clear = false;
            slide.onmouseenter = function () {
                clearInterval(cat);
                msg.textContent = "已暂停轮播";
            }
            //清除鼠标先入bug
            slide.onmousemove = function () {
                if (clear) return;
                clear = true;
                clearInterval(cat);
                setTimeout(function () {
                    clear = false;
                }, 2000)
            }
            slide.onmouseleave = function () {
                msg.textContent = "";
                cat = setInterval(function () {
                    toClick[1].onclick();
                }, 3000);
            }
            initCreate();
            function initCreate() {
                //同步情况下是一步一步往下走，我应该在设置好宽度之后img这个节点才添加transition属性，但在实际显示中，这个img宽度也会缓慢变大，吃到了后面执行的添加transition代码效果，后面我用setTimeout尝试把它转成异步执行后，得到了先设置好宽度，然后再添加transition的预期效果。我尝试想象了一下它的运行过程，img.style.width设置好宽度后，浏览器会把渲染显示过程放在异步执行，所有同步代码执行完后，再去读取异步代码，也就是如果在一些循环比较多导致同步执行较慢时，渲染显示也会发生卡顿
                //同步遇到循环耗时较长时，如何让之前设置的节点属性提前渲染到浏览器上
                img.style.transition = "";
                var allImg = [...imgsUrl];
                how = select.value;
                img.innerHTML = "";
                node.innerHTML = "";
                img.style.width = parseInt(getComputedStyle(document.querySelector(".slide"), null).width) * how + 'px';
                //转异步
                setTimeout(function () {
                    img.style.transition = "0.5s";
                }, 0)
                var imgShow = [];
                var to = 0;
                while (++to <= how) {
                    imgShow = imgShow.concat(allImg.splice(Math.floor(Math.random() * (allImg.length - 1)), 1));
                }
                to = 0;
                for (; to < how; to++) {
                    var item = document.createElement("li");
                    item.classList.add("node-item");
                    if (to == 0) item.classList.add("active");
                    node.appendChild(item);
                    nodeItems[to].dataset.data = String(to);
                    nodeItems[to].onclick = function () {
                        document.getElementsByClassName("active")[0].classList.remove("active");
                        this.classList.add("active");
                        var cat = parseInt(document.getElementsByClassName("active")[0].dataset.data);
                        img.style.left = (-parseInt(slideStyle.width)) * cat + "px";
                    }
                    nodeItems[to].innerHTML = "<div></div>";
                    img.innerHTML += `<div><img src=${imgShow[to]} alt=""></div>`;
                }
                nodeItems[0].onclick();
                clearInterval(cat);
                //转异步
                setTimeout(function () {
                    cat = setInterval(function () {
                        toClick[1].onclick();
                    }, 3000);
                }, 0)
            }

        }
    </script>
</body>

</html>